<template>
  <div id="cloudnote"  @click="newdocShow=false;isShow=false;zhaiyao=false;selectedtree=false">
  <!--web页顶部导航栏-->
  <div class="top">
    <div class="topleft">
      <i class="logo"></i>
      <router-link to="/web" >云笔记</router-link>
      <router-link to="/group" >云协作</router-link>
    </div>
    <div class="topright">
      <i class="headpic" @click="dialogFormVisible = true"><img :src="imageUrl" alt=""></i>
      <div class="info-more">
      <i class="el-icon-arrow-down drop" title="更多" v-on:click.stop="isShow=!isShow"></i>
      <!--顶部导航栏向下箭头点击出现子菜单-->
      <ul class="widget-menu" v-show="isShow">
        <li class="widget-menu-item" @click="dialogFormVisible = true"><span>个人信息</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item acc-set"><span>账号设置</span><i class="el-icon-caret-right"></i>
          <ul class="widget-menu widget-sub-menu"style="top:0">
            <li class="widget-menu-item"><span>账号信息</span></li>
            <li class="widget-menu-item"><span>账号安全</span></li>
            <li class="widget-menu-item"><span>保存邮件到笔记</span></li>
            <li class="widget-menu-item"><span>设置阅读密码</span></li>
            <li class="widget-menu-item"><span>邮件提醒</span></li>
            <li class="widget-menu-item"><span>应用管理</span></li>
          </ul></li>
        <li class="widget-menu-item"><span>导入笔记</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item"><span>官方贴吧</span></li>
        <li class="widget-menu-item"><span>帮助</span></li>
        <li class="widget-menu-item"><span>意见反馈</span></li>
        <li class="widget-menu-item"><span>用户满意度调查</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item"><span>注销登录</span></li>
      </ul>
      </div>
      <ul class="head_nav">
        <li><router-link to="/">官网</router-link></li>
        <li><a href="">会员</a></li>
        <li><a href="">客户端下载</a></li>
      </ul>
    </div>
  </div>
  <!--底部操作页面-->
<!--    <div style="height: 100%;background: red">-->
  <div class="box" ref="box" >
   <!-- 侧边栏-->
    <div class="left" ref="left">
      <div class="hd">
        <div class="create" v-on:click.stop="newdocShow=!newdocShow">
          <svg class="icon xinzeng" aria-hidden="true" font-size="30px">
            <use xlink:href="#icon-xinzeng"></use>
          </svg>
        <span class="content_text">新文档</span>
        <span class="arrow-down"></span>
         <!--左边新建文档点击出现子菜单-->
          <ul class="widget-menu" v-show="newdocShow" >
            <li class="widget-menu-item" @click="addfile(checkNode,0)"><span>新建笔记</span></li>
            <li class="widget-menu-item" @click="addfile(checkNode,1)"><span>新建Markdown</span></li>
            <li class="widget-menu-item"><span>新建模板笔记</span></li>
            <li class="widget-menu-item"><span>新建脑图</span></li>
            <li class="widget-menu-item" @click="adddoc(checkNode)"><span>新建文件夹</span></li>
            <li class="widget-menu-item split-line"></li>
            <li class="widget-menu-item"><span>导入Word</span></li>
            <li class="widget-menu-item split-line"></li>
            <li class="widget-menu-item"><span>上传文件</span></li>
            <li class="widget-menu-item"><span>上传文件夹</span></li>
          </ul>
        </div>
      </div>
      <div class="buttom_left_content">
        <ul class="leftbar">
          <!--调用disort则隐藏分类子菜单，调用sort则显示分类子菜单-->
          <router-link to="/web/newest" exact @click.native="disort"><li class="newest"><div><i class="iconfont icon-wendang"></i>{{newest}}</div></li></router-link>
          <router-link to="/web/share" exact @click.native="disort"><li class="share"><div><i class="iconfont icon-yuwofenxiang"></i>{{share}}</div></li></router-link>
          <li class="mydoc" :style="tomydoc" @click="refreshTree" @contextmenu.stop.prevent="$refs.share_menu.showMenu($event, data)">
            <i  :class="{'el-icon-arrow-down':docopen,'el-icon-arrow-right':!docopen}" id="docopen" v-on:click.stop="docuopen" v-show="docopen_arrow"></i>
            <router-link to="/web/mydoc" exact @click.native="sort"><div><i class="iconfont icon-wenjianjia"></i>{{mydoc}}</div></router-link>
          </li>
         <!--v-show的第一个参数控制文件树是否折叠，第二个参数控制文件树的位置是否隐藏，默认为true，不隐藏。当拖拽时视情况将其设为false-->
          <li style="height: 100%" v-show="docopen&&docopen_drag" class="lioftree">
         <!--引入树组件-->
            <div style="margin: 0 auto;">
              <ztree ref="doctree" v-on:checkedNode="checkedNode"></ztree>
            </div>
          </li>
          <router-link to="/web/xing" exact @click.native="disort"><li class="xing" ><div><i class="iconfont icon-xing"></i>{{xing}}</div></li></router-link>
          <router-link to="/web/dustbin" exact @click.native="disort"><li class="dustbin" @contextmenu.stop.prevent="$refs.dustbin_menu.showMenu($event, data)" ><div><i class="iconfont icon-huishouzhan"></i>{{dustbin}}</div></li></router-link>
        </ul>
        <!-- 回收站右键点击出现菜单-->
        <e-vue-contextmenu  ref="dustbin_menu" class="widget-menu" >
          <li class="widget-menu-item" @click="deleteAllDeleted"><span>清空回收站</span></li>
          <li class="widget-menu-item" @click="recoverAllDeleted"><span>全部恢复</span></li>
        </e-vue-contextmenu>
        <!-- 我的文件夹右键点击出现菜单-->
        <e-vue-contextmenu  ref="share_menu" class="widget-menu">
          <li class="widget-menu-item sharenew" @click="hideMenuShare"><span>新建</span><i class="el-icon-caret-right" style="margin-left: 50px"></i>
            <ul class="widget-menu widget-sub-menu" style="top:0">
              <li class="widget-menu-item" @click="addrootfile"><span>笔记</span></li>
              <li class="widget-menu-item"><span>Markdown</span></li>
              <li class="widget-menu-item"><span>模板笔记</span></li>
              <li class="widget-menu-item"><span>脑图</span></li>
              <li class="widget-menu-item" @click="addrootdoc"><span>文件夹</span></li>
            </ul></li>
          <li class="widget-menu-item shareupload"  @click="hideMenuShare"><span>上传</span><i class="el-icon-caret-right" style="margin-left: 50px"></i>
            <ul class="widget-menu widget-sub-menu">
              <li class="widget-menu-item"><span>文件</span></li>
              <li class="widget-menu-item"><span>文件夹</span></li>
            </ul>
          </li>
        </e-vue-contextmenu>
      </div>
    </div>
    <div class="resize" ref="resize" ><i style="border-right:2px solid #e0e1e5;display: block;width: 50%;height: 100%;float: left"></i></div>
   <div  class="mid" ref="mid">
     <div class="hd mid_tool">
       <i class="iconfont icon-fanhuishangyiji"></i>
       <i class="iconfont icon-fangdajing" @click="toSearch"></i>
       <div id="search"><el-input v-model="input" placeholder="搜索..." id="input" ></el-input></div>
        <!-- 点击切换摘要列表图标-->
       <i id="liezhai" :class="{'iconfont icon-chuangzuozhongxin_zhaiyao_':iszhaiyao,'iconfont icon-liebiao':!iszhaiyao}"  v-on:click.stop="zhaiyao=!zhaiyao"></i>
       <ul class="widget-menu zhaiyao" v-show="zhaiyao">
<!--  勾随摘要或列表的显示而决定是否显示-->
         <li class="widget-menu-item " @click="brief(true)"><span>摘要<i :class="{'el-icon-check':iszhaiyao}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item" @click="brief(false)"><span>列表<i :class="{'el-icon-check':!iszhaiyao}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item split-line" :class="{'sorted':sorted}"></li>
         <li class="widget-menu-item" :class="{'sorted':sorted}"><span>创建时间<i :class="{'el-icon-bottom':true,'el-icon-top':false}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item" :class="{'sorted':sorted}"><span>修改时间<i :class="{'el-icon-bottom':false,'el-icon-top':true}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item" :class="{'sorted':sorted}"><span>文件名称<i :class="{'el-icon-bottom':true,'el-icon-top':false}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item" :class="{'sorted':sorted}"><span>文件大小<i :class="{'el-icon-bottom':true,'el-icon-top':false}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
       </ul>
     </div>
      <!--挂载子路由-->
     <router-view @getnote="getnote" ref="list"></router-view>
   </div>
    <div class="resize2" ref="resize2"><i style="border-right:2px solid #e0e1e5;display: block;width: 50%;height: 100%;float: left"></i></div>
    <div class="right" ref="right">
      <div class="hd">
        <input class="title" type="text" v-model="editor.title" @blur="titleChange">
        <button ref="save" v-on:click="toSaveAndEdit">{{tsae}}</button>
      </div>
     <mavon-editor
       class="article"
       :value="editor.info"
       :subfield = "false"
       :defaultOpen = "'preview'"
       :toolbarsFlag = "false"
       :editable="false"
       :scrollStyle="true"
       v-show="showeditor.article"
       style="z-index:0;height: 785px"
     >
     </mavon-editor>

      <mavon-editor
                    v-model="editor.info"
                    style="z-index:0;height: 785px"
                    ref="md" @imgAdd="$imgAdd"
                    @imgDel="$imgDel"
                    v-show="showeditor.markdown"/>
      <editor-bar v-model="editor.info" :isClear="isClear" @changetwo="changetwo" v-show="showeditor.editor"></editor-bar>
    </div>
    </div>
<!--    </div>-->
<!-- 个人信息弹窗-->
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" >
      <el-form :model="form">
        <el-form-item label="头像" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>点击可更换头像 支持jpg 小于2MB
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.radio" >
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          <el-radio :label="0">保密</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="地区" :label-width="formLabelWidth">
          <v-distpicker @selected="onSelected" :province="form.province" :city="form.city" :area="form.area"></v-distpicker>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input v-model="form.signature"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import EditorBar from './compo/wangeditor'//引入富文本编辑器
  import VDistpicker from 'v-distpicker'//引入地址联级选择器
  import ztree from "./ztree";
  import state from '../vuex/store'
  import {mapMutations} from 'vuex'

  export default {
      name: "cloudnote",
      data() {
          return {
              tsae:'保存',
              showeditor:{
                  article:0,
                  markdown:0,
                  editor:1,
              },
              tomydoc: {
                  background: 'transparent',
                  color: '#393939',
              },
              sorted: true,
              selectedtree: false,
              docopen_arrow: true,//控制“我的文件夹”这个li的箭头符号是否显示
              docopen_drag: true,//控制文件树随左移动线的拖拽而显隐
              imageUrl: '',
              dialogFormVisible: false,
              iszhaiyao: this.$store.state.user.iszhaiyao,
              input: '',
              editor: {
                  type: '',
                  noteId: '',
                  info: '',
                  title: '',

              },
              docopen: true,
              isClear: false,
              newest: "最新文档",
              share: "与我分享",
              mydoc: "我的文件夹\u00A0\u00A0",
              xing: "加星文件",
              dustbin: "回收站\u3000",
              isShow: false, //右上角菜单是否打开
              newdocShow: false,//新增文档菜单是否打开
              zhaiyao: false,//摘要与列表文档菜单是否打开
              count: 16,
              form: {
                  nickname: '',
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: '',
                  signature: '',
                  radio: 1,
                  userId: '',
                  province: '',
                  city: '',
                  area: ''
              },
              formLabelWidth: '120px',
              checkNode: {
                  id: 0,
              },
              headPicFile: File,
          }
      },
      mounted() {
          var _this = this;
          _this.dragControllerDiv();
          _this.getform();
      },
      methods: {
          ...mapMutations(['besure']),
          ...mapMutations(['bezhaiyao']),
          dragControllerDiv: function () {
              var _this = this;
              var resize = document.getElementsByClassName('resize');
              var resize2 = document.getElementsByClassName('resize2');
              var left = document.getElementsByClassName('left');
              var right = document.getElementsByClassName('right');
              var mid = document.getElementsByClassName('mid');
              var box = document.getElementsByClassName('box');
              for (let i = 0; i < resize.length; i++) {
                  resize[i].onmousedown = function (e) {
                      var startX = e.clientX;
                      resize[i].left = resize[i].offsetLeft;
                      document.onmousemove = function (e) {
                          var endX = e.clientX;
                          var rightW = right[i].offsetWidth;
                          var moveLen = resize[i].left + (endX - startX);//左线移动后距离左网页边的长度
                          var maxT = box[i].clientWidth - resize[i].offsetWidth;
                          if (moveLen < 80) moveLen = 80;
                          if (moveLen > maxT - rightW - 80) moveLen = maxT - rightW - 80;
                          resize[i].style.left = moveLen;
                          for (let j = 0; j < left.length; j++) {
                              left[j].style.width = moveLen + 'px';
                              mid[j].style.width = (box[j].clientWidth - moveLen - rightW - 10) + 'px';
                              right[j].style.width = rightW + 'px';
                          }
                          if (left[0].style.width == (80 + "px")) {
                              _this.change("lala");
                          } else {
                              _this.back();
                          }
                      }
                      document.onmouseup = function (evt) {
                          document.onmousemove = null;
                          document.onmouseup = null;
                          resize[i].releaseCapture && resize[i].releaseCapture();
                      }
                      resize.setCapture && resize.setCapture();
                      return false;
                  }
              }
              for (let i = 0; i < resize2.length; i++) {
                  resize2[i].onmousedown = function (e) {
                      var startX = e.clientX;
                      resize2[i].left = resize2[i].offsetLeft;
                      document.onmousemove = function (e) {
                          var endX = e.clientX;
                          var leftW = left[i].offsetWidth;
                          var moveLen = resize2[i].left + (endX - startX) - leftW;
                          var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
                          if (moveLen < 295) moveLen = 295;
                          if (moveLen > maxT - leftW - 295) moveLen = maxT - leftW - 295;
                          resize2[i].style.left = moveLen;
                          for (let j = 0; j < right.length; j++) {
                              mid[j].style.width = moveLen + 'px';
                              right[j].style.width = (box[j].clientWidth - moveLen - leftW - 10) + 'px';
                              left[j].style.width = leftW + 'px';
                          }
                      }
                      document.onmouseup = function (evt) {
                          document.onmousemove = null;
                          document.onmouseup = null;
                          resize2[i].releaseCapture && resize2[i].releaseCapture();
                      }
                      resize2.setCapture && resize2.setCapture();
                      return false;
                  }
              }
          },
          change: function (val) {
              var _this = this;
              _this.newest = "";
              _this.share = "";
              _this.mydoc = "";
              _this.xing = "";
              _this.dustbin = "";
              _this.docopen_drag = false;//文件树隐藏（这个隐藏只是文件树位置的隐藏，不影响原来的开合状态
              _this.docopen_arrow = false;//“我的文件夹”li的箭头消失
          },
          back: function (val) {
              var _this = this;
              _this.newest = "最新文档";
              _this.share = "与我分享";
              _this.mydoc = "我的文件夹\u00A0\u00A0";
              _this.xing = "加星文件";
              _this.dustbin = "回收站\u3000";
              _this.docopen_drag = true;//文件树出现（这个出现只是文件树位置的出现，不影响原来的开合状态
              _this.docopen_arrow = true;//“我的文件夹”li的箭头出现
          },
          saved: function () {
              console.log(this.editor.info);
              var _this = this;
              _this.$axios.put('/note/updateContent', {
                  noteId: _this.editor.noteId,
                  content: _this.editor.info,
                  noteTitle: _this.editor.title,
                  // createTime:new Date().getTime()
              }).then(function (res) {
                  _this.$refs.list.getnotelist();
                  _this.$refs.doctree.refreshTree();
                  console.log(res);
              }).catch(function (err) {
                  console.log(err);
              })
              _this.tsae='已保存';
              if(_this.editor.type==1){
                  setTimeout(function () {
                      _this.showeditor.editor=0;
                      _this.showeditor.article=1;
                      _this.showeditor.markdown=0;
                      _this.tsae='编辑';
                  },100);
              }else {setTimeout(function () {
                  _this.tsae='保存';
              }, 1000);}
          },
          load() {
              this.count += 2
          },
          tosub(val) {
              this.$router.push("/web/" + val);
          },
          changetwo(val) {
              this.editor.info = val;
          },
          hideMenuDustbin() {
              this.$refs.dustbin_menu.hideMenu(); // 隐藏回收站菜单
          },
          hideMenuShare() {
              this.$refs.share_menu.hideMenu(); // 隐藏回收站菜单
          },
          //触发地区选择
          onSelected(data) {
              this.form.province = data.province.value;
              this.form.city = data.city.value;
              this.form.area = data.area.value;
          },
          //图像上传操作
          handleAvatarSuccess(res, file) {
              console.log("res是", res);
              console.log(file);
              this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 2;
              if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              console.log('上传前的file是', file);
              this.headPicFile = file;
              console.log('head', this.headPicFile);
              return isJPG && isLt2M;
          },
          docuopen() {
              this.docopen = !this.docopen;
          },
          addrootdoc() {
              this.$refs.doctree.add(1, 0);
          },
          addrootfile() {
              this.$refs.doctree.add(0, 0);
          },
          saveUserInfo() {
              var myDate = new Date();
              var _this = this;
              console.log(this.imageUrl);
              _this.$axios.put('/user/update',
                  {
                      credentials: true,
                      userId: _this.form.userId, //发送用户输入的新地址到后端
                      createTime: myDate,
                      nickname: _this.form.nickname,
                      sex: _this.form.radio,
                      // avatar:_this.headPicFile,
                      avatar: _this.imageUrl,
                      signature: _this.form.signature,
                      province: _this.form.province,
                      city: _this.form.city,
                      area: _this.form.area,
                  }
              ).then(function (res) {
                  if (res.data.code === 200) {
                      _this.getform();
                      _this.dialogFormVisible = false;
                      console.log(res);
                  }
              }).catch(function (err) {
                  console.log(err);
              });
          },
          //从newest拿来内容并渲染到编辑框和标题栏
          getnote(val) {
              this.editor.title = val.title;
              this.editor.info = val.detail;
              this.editor.noteId = val.noteId;
              this.editor.type = val.type;
              if(this.editor.type==0){//若是普通笔记，展示富文本编辑器
                  this.showeditor.editor=1;
                  this.showeditor.article=0;
                  this.showeditor.markdown=0;
                  this.tsae='保存';
              }
              if(this.editor.type==1){//若是Md笔记，展示文本框
                  this.showeditor.editor=0;
                  this.showeditor.article=1;
                  this.showeditor.markdown=0;
                  this.tsae='编辑';
              }
              console.log(this.editor);
          },
          getform() {
              var _this = this;
              this.$axios.get('/user/view', {
                  params: {}
              }).then(function (response) {
                      console.log(response);
                      var getform = response.data.data.data;
                      console.log(getform);
                      _this.form.nickname = getform.nickname;
                      _this.form.userId = getform.userId;
                      _this.form.radio = getform.sex;
                      _this.form.signature = getform.signature;
                      _this.form.province = getform.province;
                      _this.form.city = getform.city;
                      _this.form.area = getform.area;
                      // _this.imageUrl=getform.avatar;
                  }
              ).catch(function (error) {
                      console.log(error);
                  }
              );
          },
          addfile(checkNode,type) {//新建笔记
              var _this = this;
              if (checkNode.id == 0) {
                  _this.$refs.doctree.add(0, 0,type);
              } else {
                  _this.$refs.doctree.add(0, 1,type);
              }

          },
          adddoc(checkNode) {
              var _this = this;
              if (checkNode.id = 0) {
                  //(1,0)表示添加文件进入"我的文件夹"
                  _this.$refs.doctree.add(1, 0)
              } else {
                  _this.$refs.doctree.add(1, 1)
              }

          },
          titleChange() {//当鼠标点击别处
              var _this = this;
              if (_this.editor.title == "") {
                  _this.editor.title = "无标题笔记"
              }
              _this.saved();//进行保存

          },
          recoverAllDeleted() {
              var _this = this;
              this.$axios.post('/note/recoverAllDeleted', {
                  params: {}
              }).then(function (res) {
                  if (res.data.code == 200) {
                      _this.$refs.list.getnotelist();
                      _this.hideMenuDustbin();
                  }
              }).catch(function (err) {
                  console.log(err);
              })
          },
          deleteAllDeleted() {
              var _this = this;
              this.$axios.delete('note/deleteAllDeleted', {
                  params: {}
              }).then(function (res) {
                  if (res.data.code === 200) {
                      _this.$refs.list.getnotelist();
                      _this.hideMenuDustbin();
                  }
              }).catch(function (err) {
                  console.log(err);
              })
          },
          disort() {
              this.sorted = true;
          },
          sort() {
              this.sorted = false;
          },
          brief(item) {
              console.log(item);
              this.bezhaiyao(item);
              console.log("vuex" + this.$store.state.user.iszhaiyao);
              this.iszhaiyao = this.$store.state.user.iszhaiyao;
              console.log("iszhaiyao" + this.iszhaiyao)
              if (item == true) {
                  this.besure(false);
              } else if (item == false) {
                  this.besure(true);
              }

          },
          checkedNode(val) {
              this.checkNode.id = val.id;
              this.checkNode.pId = val.pId;
              console.log(val);
          },
          refreshTree() {
              this.tomydoc = {
                  background: '#398dee',
                  color: '#ffffff'
              };
              this.$refs.doctree.refresh();
          },
          $imgAdd() {

          },
          $imgDel() {

          },
          toSearch() {
              if (this.$route.path == '/web/search') {
                  this.$refs.list.getnotelist(this.input);
              } else {
                  this.$router.push({path: '/web/search', query: {keyword: this.input}});
              }

          },
          toSaveAndEdit(){
              var tsae=this.tsae;
              if(tsae==='保存'){
                  this.saved();
              }else if(tsae==='编辑'){
                  this.showeditor.markdown=1;
                  this.showeditor.article=0;
                  this.showeditor.editor=0;
                  this.tsae='保存';
              }
          }


      },
      components: {EditorBar, VDistpicker, ztree},
      // computed: {
      //     compiledMarkdown: function () {
      //         return marked(this.editor.info, {sanitize: true})
      //     }
      // }
  }

</script>

<style scoped>
  /*顶部区域*/
  .top{
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 999;
    background: #398dee;
    min-width: 810px;
    top: 0;
    left: 0;
  }
 .topleft{
   width: 100%;
   height: 100%;
   top:0;
   left: 20px;
   position: absolute;
   background: #398dee;
 }
  .topright{
    position: relative;
    float: right;
    height: 100%;
    width: 308px;
    background: #398dee;
    margin-right: 10px;
  }
  .logo{
    position: relative;
    top:10px;
    display: inline-block;
    width: 143px;
    height: 27px;
    background: url("../assets/sprite-e2e8774953.svg") 0 0 no-repeat;
    float: left;
    margin-right: 50px;
  }
 .top a{
    display: inline-block;
    height: 100%;
    width:76px;
    float: left;
   background: #398dee;
   line-height: 50px;
   font-size: 15px;
   color: white;
   opacity: 0.5;
}
  .topleft .router-link-active{
    opacity: 1;
    background: #3178cb;
  }

  .info-more{
    display: inline-block;
    height: 100%;
    width: 5px;
  }
.drop {
  background: #398dee;
  cursor: pointer;
  position: absolute;
  /*top: 45%;*/
  height: 100%;
  line-height: 50px;
  left: 70px;
  color:white;
}
  .head_nav{
    float: right;
  }
  .head_nav li{
    float: left;

  }
  .head_nav>li a{
    font-size: 10px;
    color: white;
    opacity: 0.8;
  }
  .headpic{
    width: 54px;
    height: 50px;
    cursor: pointer;
  }
  .headpic img{
    width: 38px;
    height: 38px;
    margin:6px 8px;
    border-radius: 50%;
  }
  /*底部区域*/
  .box{
    height: 885px;
    width: 100%;
    margin-top:-10px ;
    overflow: hidden;
  }
.hd{
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px #FFFFFF;
  height: 70px;
  line-height: 70px;
  width: 100%;
  box-sizing:border-box;
}
.create:hover{
 cursor: pointer;
}
  .create:hover>span:first-of-type{
    color: #2da1f8;
  }
.content_text{
  font-size: 12px;
  color:#393939 ;
  width: 36px;
  height: 40px;
}
.xinzeng{
  position: relative;
  top: 6px;
}

  .arrow-down{
    position: relative;
    top: 12px;
    left: 2px;
    width: 6px;
    height: 5px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4.5px solid #959fb1;

  }
  .left{
    width:10%;
    height:100%;
    background: #f5f5f5;
    float:left;
    min-width: 80px;
  }
 .mid{
    float:left;
    width:16%;
    height:100%;
  }
  .right{
    float:left;
    width: calc(74% - 10px);
    height:100%;
  }
  .right .hd{
    padding: 0 20px;
  }
  .right .hd input{
    height: 30px;
    font-size: 18px;
    width: 80%;
    border: none;
    outline: none;
    display: inline-block;
    float: left;
    position: relative;
    top: 20px;
    left: 0;
  }
  .right .hd button{
    display: inline-block;
    background: transparent;
    color: rgba(45,161,248,0.8);
    font-size: 15px;
    border-radius: 5px;
    border:rgba(153,153,153,0.5) 1px solid;
    outline: none;
    width: 82px;
    height: 32px;
    cursor: pointer;
  }
  .right .hd button:hover{
    color: rgba(45,161,248,1);
    border:rgba(153,153,153,1) 1px solid;
  }
 .resize{
    width:5px;
    height:100%;
    cursor: w-resize;
    float:left;
   background: white;
  }
  .resize2{
    width:5px;
    height:100%;
    cursor: w-resize;
    float:left;
    background: white;
  }
  .leftbar{
    display: block;
    width: 100%;
  }
  .leftbar li{
    display: block;
    height: 50px;
    line-height: 50px;
    width: 100%;
    float: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis !important;
  }
  .leftbar li:hover{
    background: #e4edf8;
    cursor: pointer;
  }
  .leftbar li:nth-child(4):hover{
    background: #f5f5f5;
  }
  .leftbar li i{
    font-size: 25px;
    display: inline-block;
   margin:0 10px;
    /*float: left;*/
  }
  .leftbar li div {
    display: inline-block;
    margin: 0 10px;
    /*width: 40%;*/
  }
  /*中间部分*/
  .mid_tool{
    width: 100%;
    display: flex;
    padding: 0 20%;
  }
  .mid_tool i{
    font-size: 20px;
    margin: 0 auto;
  }

  #search{
    display: inline-block;
    margin-right: 10px;
  }
  #search #input{
    width: 100%;
  }
  .icon-chuangzuozhongxin_zhaiyao_:hover,.icon-liebiao:hover{
    color: #2da1f8;
    cursor: pointer;
  }
  /*导航栏菜单*/
  /*右上角子菜单*/
  .widget-menu{
    display: inline-block;
    width: 125px ;
    background: #ffffff;
    z-index: 1000;
    position: absolute;
    left: 25px;
    top: 50px;
    box-shadow: 0px 1px 16px 0 rgba(90, 109, 122, 0.41);
    padding: 0;
    border-radius: 0;
  }
  .zhaiyao{
    left: 210px;
    top: 60px;
  }
  /*新增文件子菜单*/

  .widget-menu .widget-menu-item{
    display: inline-block;
    float: left;
    width: 100%;
    cursor: pointer;
    height: 30px;
    color: #999;
    font-size: 12px;

  }
  .widget-menu .widget-menu-item span{
    display: inline-block;
    float: left;
    position: relative;
    top: 25%;
    margin-left: 20px;
    /*覆写行高以避免继承父元素行高*/
    line-height: 100%;
  }
  .widget-menu .widget-menu-item:hover{
    background: #ebf3fd;
    color: #7ab2f3;
  }
  .el-icon-caret-right{
    position: relative;
    top: 22%;
    color: #999999 !important;
  }
  .split-line{
    height: 0 !important;
    border-bottom:#ebf3fd solid 1px;
  }
  /*导航栏子菜单*/
  .widget-sub-menu{
    position: absolute;
    left: 121px;
    top:31px;
    display: none;
  }
  .widget-sub-menu li span{
    display: inline-block;
    float: left;
    position: relative;
    top: 25%;
    margin-left: 20px;
  }
  .acc-set:hover .widget-sub-menu{
    display: inline-block;
  }
  .sharenew:hover .widget-sub-menu{
    display: inline-block;
  }
  .shareupload:hover .widget-sub-menu{
    display: inline-block;
  }

  .router-link-exact-active li{
    background: #398dee;
    color: #ffffff;
  }

  .router-link-exact-active li:hover{
    background: #398dee;
    color: #ffffff;
  }
  .router-link-exact-active>div{
    color: #ffffff;
  }

/*头像上传*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  #docopen{
    font-size: 15px;
    /*这行代码别删，否则“我的文件”这个li里的内容将不能和其它li样式对齐，具体原因暂时不明*/
    margin: 0 auto;
  }
  .sorted{
    display:none !important;
  }
  .article{
    height: 785px;
    background: red;
    width: 100%;
  }

</style>
